<script lang="ts" setup>
  import type { HoleScore, PlayerScore } from '@/types/game-score';
  import type { CourseHole } from '@/types/course';
  import { onMounted, ref } from 'vue';
  import { kickOffTypeNames, kickOffDirectionNames } from '@/config/game';
  import { Message } from '@arco-design/web-vue';
  import { updatePlayerScore } from '@/api/game';

  const props = defineProps<{
    playerScore?: PlayerScore;
    gameId: string;
    holeList: CourseHole[];
  }>();

  const emit = defineEmits(['close']);

  const saving = ref(false);
  const holeScoreList = ref<
    {
      holeScore: Partial<HoleScore>;
      hole: CourseHole;
    }[]
  >([]);

  onMounted(() => {
    const holeScores = props.playerScore?.gameHoleScores || [];
    const list: {
      holeScore: Partial<HoleScore>;
      hole: CourseHole;
    }[] = [];
    props.holeList.forEach((hole) => {
      const holeScore = holeScores.find((i) => i.holeId === hole.id);
      if (holeScore) {
        list.push({
          holeScore,
          hole,
        });
      } else {
        list.push({
          hole,
          holeScore: {
            gameId: props.gameId,
            userId: props.playerScore?.id,
            holeId: hole.id as string,
          },
        });
      }
    });
    holeScoreList.value = list;
  });

  const handleSubmit = async () => {
    const hasEmpty = holeScoreList.value.find((item) => {
      return (
        item.holeScore.parCount === null ||
        item.holeScore.parCount === undefined ||
        item.holeScore.putCount === null ||
        item.holeScore.putCount === undefined ||
        item.holeScore.penaltyCount === null ||
        item.holeScore.penaltyCount === undefined ||
        item.holeScore.kickOffDirection === null ||
        item.holeScore.kickOffDirection === undefined ||
        item.holeScore.kickOffType === null ||
        item.holeScore.kickOffType === undefined
      );
    });
    if (hasEmpty) {
      Message.warning(`球洞 ${hasEmpty.hole.holeIndex} 分数不正确`);
      return;
    }
    try {
      saving.value = true;
      const promises = holeScoreList.value.map((item) => {
        return updatePlayerScore({
          ...item.holeScore,
        });
      });
      await Promise.all(promises);
      emit('close', true);
    } finally {
      saving.value = false;
    }
  };
</script>

<template>
  <a-modal
    title="批量修改逐洞成绩"
    visible
    :width="1300"
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <div>球员： {{ playerScore?.nickname }}</div>
    <table>
      <thead>
        <tr>
          <td style="width: 80px">编号</td>
          <td v-for="hole in holeList" :key="hole.id">
            {{ hole.holeIndex }}
          </td>
        </tr>
        <tr>
          <td>PAR</td>
          <td v-for="hole in holeList" :key="hole.id">
            {{ hole.par }}
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>总杆数</td>
          <td v-for="item in holeScoreList" :key="item.hole.id">
            <a-input-number
              v-model="item.holeScore.parCount"
              hide-button
              :precision="0"
              :min="1"
            />
          </td>
        </tr>
        <tr>
          <td>推杆数</td>
          <td v-for="item in holeScoreList" :key="item.hole.id">
            <a-input-number
              v-model="item.holeScore.putCount"
              hide-button
              :precision="0"
              :min="0"
            />
          </td>
        </tr>
        <tr>
          <td>罚杆数</td>
          <td v-for="item in holeScoreList" :key="item.hole.id">
            <a-input-number
              v-model="item.holeScore.penaltyCount"
              hide-button
              :precision="0"
              :min="0"
            />
          </td>
        </tr>
        <tr>
          <td>开球情况</td>
          <td v-for="item in holeScoreList" :key="item.hole.id">
            <a-select
              v-model="item.holeScore.kickOffType"
              size="mini"
              :options="
                kickOffTypeNames.map((i, index) => ({ label: i, value: index }))
              "
            />
          </td>
        </tr>
        <tr>
          <td>开球方向</td>
          <td v-for="item in holeScoreList" :key="item.hole.id">
            <a-select
              v-model="item.holeScore.kickOffDirection"
              size="mini"
              :options="
                kickOffDirectionNames.map((i, index) => ({
                  label: i,
                  value: index,
                }))
              "
            />
          </td>
        </tr>
      </tbody>
    </table>
  </a-modal>
</template>

<style lang="less" scoped>
  table {
    width: 100%;
    border: 1px solid var(--color-border-2);
    border-bottom: none;
    border-spacing: 0;
  }
  td {
    padding: 5px 0;
    text-align: center;
    border-right: 1px solid var(--color-border-2);
    border-bottom: 1px solid var(--color-border-2);
    &:last-child {
      border-right: none;
    }
  }
  :deep(.arco-input-wrapper .arco-input) {
    text-align: center;
  }
</style>
